<template>
	<div class="container">
		<div class="handle-box">
			<el-select v-model="query.symbol"  placeholder="交易品种" class="handle-select mr10" size="medium" clearable @clear="handleSearch">
				<el-option v-for="item in TypeList" :key="item.symbol" :label="item.symbol_name" :value="item.symbol"></el-option>
			</el-select>
			<el-select v-model="query.timeframe"  placeholder="数据周期" class="handle-select mr10" size="medium" clearable @clear="handleSearch">
				<el-option v-for="item in TimeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
			</el-select>
			<el-button type="primary" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
		</div>
		<el-table v-loading="loading" :data="histableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" >
			<el-table-column type="index" label="ID" width="80" align="center"></el-table-column>
			<el-table-column prop="symbol" label="代码"></el-table-column>
			<el-table-column prop="timeframe" label="周期"></el-table-column>
			<el-table-column prop="open" label="开盘价"></el-table-column>
			<el-table-column prop="high" label="最高价"></el-table-column>
			<el-table-column prop="low" label="最低价"></el-table-column>
			<el-table-column prop="close" label="收盘价"></el-table-column>
			<el-table-column prop="volume" label="成交量"></el-table-column>
			<el-table-column prop="open_date" label="开盘时间" width="150"></el-table-column>
			<el-table-column label="操作" align="center">
				<template #default="scope">
					<!-- <el-button type="text" icon="el-icon-edit" class="red" @click="handleEdit(scope.row.id)">编辑</el-button> -->
					<el-button type="text" icon="el-icon-delete" class="red1" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				v-if="paginationShow"
				background
				layout="total,sizes,prev,pager,next"
				:current-page="query.pageIndex"
				:page-size="query.pageSize"
				:total="pageTotal"
				@current-change="handlePageChange"
				@size-change="handleSizeChange"
				:page-sizes="[10, 20, 50, 100]"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { productBarListAPI,productListAPI} from '@/api/index';

export default {
	name: 'basetable',
	data() {
	    return {
			loading:false,
			histableData:[],
			pageTotal:0,
	        query:{
	            pageNum: 1,
	            pageSize: 10,
	        },
			value:'',
			TypeList:[],
			TimeList:[{
				id:'1Min',
				name:'1Min'
			},{
				id:'5Min',
				name:'5Min'
			},{
				id:'15Min',
				name:'15Min'
			},{
				id:'1H',
				name:'1H'
			},{
				id:'2H',
				name:'2H'
			},{
				id:' 12H,',
				name:' 12H,'
			},{
				id:'1D',
				name:'1D'
			}],
			paginationShow:true
	    };
	},
	mounted() {
		this.getList()//交易品种
		this.getType()
	},
	methods:{
		// 历史数据列表
		getList(){
			this.loading = true
			productBarListAPI(this.query).then(res => {
				if(res.status == 200){
					this.histableData = res.data;
					this.pageTotal = res.total;
					this.loading = false
				}else{
					this.loading = true
				}
			});
		},
		getType(){
			var parems  = {
				pageNum: 1,
				pageSize: 100000,
			}
			productListAPI(parems).then(res => {
				if(res.status == 200){
					this.TypeList = res.data;
				}
			});
		},
		// 查询
		handleSearch(){
			this.query.pageNum = 1;
			this.loading = true
			this.getList()
		},
		// 分页导航
		handlePageChange(val){
			this.query.pageNum = val;
			this.getList()
		},
		handleSizeChange(val){
			this.query.pageNum = 1
			this.query.pageSize = val;
			this.getList()
		},
		// 删除
		handleDelete(data) {
			var parems = {id:data}
			// 二次确认删除
			this.$confirm('确定要删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				delUserAPI(parems).then(res => {
					if(res.code == 200){
						this.$message.success('删除成功');
						this.getData();
					}else{
						this.$message.error(res.message);
					}
				});
			}).catch(() => {
				
			});
		}
	}
};
</script>

<style scoped>
.mb8 {
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.handle-box{
	margin-bottom: 10px;
}
.handle-select {
	width: 240px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 13px;
}
.red{
	color: #67C23A !important;
}
.red1 {
	color: #ff0000 !important;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>
